import React, { ChangeEvent, useState } from "react";
// import { useDispatch } from "react-redux";
import { useAppDispatch } from "../../app/hooks";
import { add, addAsync, addAsync2 } from "../../features/todo/todoSlice";
import { TodoProps } from "../../features/todo/todoSlice";

export default function Todo() {
  const dispatch = useAppDispatch();
  const [text, setText] = useState("");
  const onTextChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const onAddText = () => {
    dispatch(
      add({
        id: Date.now(),
        text,
      })
    );
    setText("");
  };
  const onAddAsyncText = () => {
    // dispatch(
    //   addAsync2({
    //     id: Date.now(),
    //     text,
    //   })
    // );
    dispatch(
      addAsync({
        id: Date.now(),
        text,
      })
    );
    setText("");
  };

  return (
    <div>
      <input type="text" value={text} onChange={onTextChange} />
      <button onClick={onAddText}>添加</button>
      <button onClick={onAddAsyncText}>异步添加1</button>
    </div>
  );
}
